<template>
  <div class="home">

    <!-- 底部轮播图 -->
    <div class="bottom-carousel">
      <!-- 顶部组件 -->
      <home-topbar style="position: absolute;z-index: 9;"></home-topbar>

      <!-- 轮播图背景 -->
      <el-carousel :height="bannerHeight + 'px'" arrow="never">
        <el-carousel-item v-for="(item, i) in bgImgList" :key="i">
          <img ref="img" :src="item" :alt="i" style="width: 100%;" @load="carouselImgLoad">
        </el-carousel-item>
      </el-carousel>

      <!-- 底部下载栏 -->
      <home-bottom></home-bottom>
    </div>

    <!-- 登录输入框 -->
    <div class="home-login-block">
      <div class="home-login-block-top">
        <div>
          <div class="home-login-block-top-label-left">账号密码登录</div>
          <div class="home-login-block-top-label-right" @click="$message.warning('由于第三方API限制，暂不支持此功能')">短信快捷登录></div>
        </div>
        <div style="margin-top: 36px;">
          <el-input class="login-input-top" placeholder="手机号/用户名/邮箱" clearable v-model="username"></el-input>
          <el-input show-password class="login-input-bottom" placeholder="密码" clearable v-model="password" @keyup.enter.native="login"></el-input>
          <el-button type="primary" class="login-btn" @click="login">登录</el-button>
          <div class="forget-pwd" @click="$message.warning('猪，这都能忘，自己想办法回忆')">忘记密码？</div>
        </div>
      </div>
      <div class="home-login-block-bottom">
        <div class="home-login-block-bottom-label" @click="$message.warning('由于第三方API限制，暂不支持此功能')">扫一扫登录</div>
        <div>
          <div class="icon-box weibo-icon" @click="$message.warning('由于第三方API限制，暂不支持此功能')"></div>
          <div class="icon-box qq-icon" @click="$message.warning('由于第三方API限制，暂不支持此功能')"></div>
          <div class="icon-box wechat-icon" @click="$message.warning('由于第三方API限制，暂不支持此功能')"></div>
        </div>
        <div class="home-login-block-bottom-label" @click="$message.warning('相关接口暂未开放，敬请期待')">立即注册</div>
      </div>
    </div>

  </div>
</template>

<script>
import HomeTopbar from '@/views/Home/HomeTopbar';
import HomeBottom from '@/views/Home/HomeBottom';
import userData from '../../database/data.json';

export default {
  name: 'Home',
  components: { HomeTopbar, HomeBottom },
  data() {
    return {
      username: '',
      password: '',
      bgImgList: [
        require('../../assets/images/bg1.png'),
        require('../../assets/images/bg2.jpg'),
        require('../../assets/images/bg3.jpg'),
        require('../../assets/images/bg4.jpg'),
      ],
      bannerHeight: '',
    }
  },
  methods: {
    // 重新定义轮播图的高度
    carouselImgLoad() {
      this.$nextTick(() => {
        if (this.$refs['img'][0]) {
          this.bannerHeight = this.$refs['img'][0].height;
        }
      })
    },
    // 登录的方法
    login() {
      // 判断是否含有当前登录的用户
      const existUser = userData.find(item => {
        return (item.name === this.username) || (item.phone === this.username) || (item.email === this.username);
      });

      if (existUser === undefined || existUser.password !== this.password)
        return this.$message.warning('用户名或密码输入有误，请重新输入！');

      let md5User = { ...existUser, password: this.$md5(existUser.password) }

      // 将当前用户信息存至vuex中
      this.$store.commit('setUserInfo', md5User);
      this.$store.commit('setInitContentRoute', '网盘');
      this.$store.commit('setCurCntLeftRoute', '全部文件');

      // 路由跳转至网盘首页
      this.$router.push('/content/pan/all-files');
    },
  },
  mounted() {
    this.carouselImgLoad();
    // 监听屏幕大小变化 重新赋值轮播图高度
    window.addEventListener('resize', () => {
      this.carouselImgLoad();
    }, false);
  }
}
</script>

<style lang="less">
.home {
  width: 100%;
  height: 100%;
  position: relative;

  .bottom-carousel {
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  .home-login-block {
    width: 352px;
    height: 405px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 3px;
    position: absolute;
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);

    .home-login-block-top {
      height: 340px;
      padding: 40px 20px 0px;
      box-sizing: border-box;

      .home-login-block-top-label-left {
        font-size: 18px;
        color: #333333;
        font-weight: bolder;
        display: inline;
      }

      .home-login-block-top-label-right {
        font-size: 16px;
        color: #09aaff;
        float: right;
        display: inline;
        cursor: pointer;
        &:hover {
          opacity: .5;
        }
      }
      
      .login-input-top {
        .el-input__inner {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
      }

      .login-input-bottom {
        .el-input__inner {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }
      }

      .login-btn {
        margin-top: 55px;
        width: 100%;
      }

      .forget-pwd {
        font-size: 14px;
        color: #666666;
        margin-top: 14px;
        cursor: pointer;
        &:hover {
          opacity: .5;
        }
      }
    }

    .home-login-block-bottom {
      height: 65px;
      padding: 0 20px;
      background-color: #f3f8ff;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      display: flex;
      justify-content: space-between;
      div {
        display: inline-block;
        line-height: 65px;
        color: #09aaff;
        font-size: 14px;
      }

      .home-login-block-bottom-label {
        cursor: pointer;
        &:hover {
          opacity: .5;
        }
      }
    }
  }
  .icon-box {
    width: 22px;
    height: 22px;
    margin: 20px 10px 0 0;
    cursor: pointer;
  }
  .qq-icon {
    background: url('../../assets/images/logo_qq.png');
    &:hover {
      background: url('../../assets/images/logo_qq_hover.png');
    }
  }
  .weibo-icon {
    background: url('../../assets/images/logo_sinaweibo.png');
    &:hover {
      background: url('../../assets/images/logo_sinaweibo_hover.png');
    }
  }
  .wechat-icon {
    background: url('../../assets/images/logo_wechat.png');
    &:hover {
      background: url('../../assets/images/logo_wechat_hover.png');
    }
  }
}
</style>